<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>

</head>
<body>
<form id="login_form">
    <input type="text" name="uname" id="username"> <br>
    <input type="email" name="email" id="email">
    <button type="button" id="btn_login">login</button>
</form>

<div id="outer">

</div>


<!--    引入jquery框架-->
<script src="/boot/plugins/jquery/jquery.min.js"></script>
<script>
    $(function(){
        $("#btn_login").click(function(){
            let url='/boot/ajax/hello02';
            //发送的参数是一个json对象
            //手动获取文本框中的数据
            let username = $("#username").val();
            let email = document.querySelector("#email").value;
            //必须要保证Json的key和控制层的方法的参数的名称高度保持一致
            let data = {username:username,email:email}
            //发送参数
            $.get(url,data,function(res){
                //res是后端返回过来的json数据
                //{code: '200', msg: '请求成功', data: 'admin:123@qq.com'}
                console.log(res)
                //json对象.key获取value
                let obj = res.data;//user对象的json对象的格式
                console.log(obj)
                console.log(obj.username)

                let outer = document.querySelector("#outer")
                outer.innerHTML="<h1>"+obj.username+"</h1>"
            })
        })
    })
</script>
</body>
</html>